<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #canvas {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background: #d9d9d9;
    }
    </style>
</head>

<body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <script>
    let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d');
    let rect = {
        x: 190,
        y: 450,
        w: 120,
        h: 30,
        color: 'black'
    }
    let dir = {
        left: false,
        right: false,
        bottom: false,
        top: false
    }
    let ball = {
        x: 250,
        y: 400,
        r: 15,
        color: 'red',
        vx: 6,
        vy: 8,
    }

    let gift = [];

    /*储存砖块*/
    let bricks = [
        { x: 5, y: 30, w: 60, h: 30, life: true, gift: true, color: getColor() },
        { x: 75, y: 30, w: 60, h: 30, life: true, gift: true, color: getColor() },
        { x: 145, y: 30, w: 60, h: 30, life: true, gift: false, color: 'black' },
        { x: 215, y: 30, w: 60, h: 30, life: true, gift: true, color: getColor() },
        { x: 285, y: 30, w: 60, h: 30, life: true, gift: false, color: 'black' },
        { x: 355, y: 30, w: 60, h: 30, life: true, gift: true, color: getColor() },
        { x: 425, y: 30, w: 60, h: 30, life: true, gift: false, color: 'black' },

        { x: 5, y: 80, w: 60, h: 30, life: true, gift: false, color: 'black' },
        { x: 75, y: 80, w: 60, h: 30, life: true, gift: true, color: getColor() },
        { x: 145, y: 80, w: 60, h: 30, life: true, gift: false, color: 'black' },
        { x: 215, y: 80, w: 60, h: 30, life: true, gift: true, color: 'black' },
        { x: 285, y: 80, w: 60, h: 30, life: true, gift: true, color: getColor() },
        { x: 355, y: 80, w: 60, h: 30, life: true, gift: true, color: getColor() },
        { x: 425, y: 80, w: 60, h: 30, life: true, gift: false, color: 'black' },

    ];
        ctx.font = '32px Arail'
        ctx.fillText('Game Start', 150, 250);
        ctx.font = '16px Arail'
        ctx.fillText('Please keyDown P start game', 150, 300);
    
    var score = 0;

    function draw() {
        ctx.clearRect(0, 0, 500, 500);
        for (let item of bricks) {
            if (item.life == true) {
                ctx.fillStyle = item.color;
                ctx.fillRect(item.x, item.y, item.w, item.h);
            }
            if (checkCollision(ball, item)) {
                ball.color = item.color;
                score += 10;
                item.life = false;
                var index = bricks.indexOf(item);
                bricks.splice(index, 1);
                ball.vx = -ball.vx;
                ball.vy = -ball.vy;
                if(item.gift){
                	createGift(item);
                }
            }
        }
        if (bricks.length == 0) {
            alert('You win');
        }

        /*滑块*/
        ctx.fillStyle = rect.color;
        ctx.fillRect(rect.x, rect.y, rect.w, rect.h);

        /*小球*/
        ball.x += ball.vx;
        ball.y += ball.vy;
        if (ball.x - ball.r < 0 || ball.x + ball.r > 500) {
            ball.vx = -ball.vx;

        }
        if (ball.y - ball.r < 30) {
            ball.vy = -ball.vy;
        }

        if(ball.y + ball.r > 500){
        	alert('Game over');
        	location.href = location.href;
        }


        if (checkCollision(ball, rect)) {
            if (dir.left) {
                ball.vx = -ball.vx;
            }
            if (dir.right) {
                ball.vx = ball.vx;
            }
            ball.vy = -ball.vy;
        }

        ctx.beginPath();
        ctx.fillStyle = ball.color;
        ctx.arc(ball.x, ball.y, ball.r, 0, Math.PI * 2, false);
        ctx.fill();


        /*分数统计*/
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.font = '18px Arail';
        ctx.fillStyle = 'black';
        ctx.fillText('Score: ' + score, 500 / 2, 30 / 2)

        /*生成道具*/
        for (let item of gift) {
        	item.y += item.vy;
        	ctx.beginPath();
            ctx.fillStyle = item.color;
            ctx.arc(item.x, item.y, item.r, 0, Math.PI  * 2, false);
            ctx.fill();
            if(checkCollision(item, rect)){
            	var index = gift.indexOf(item);
            	gift.splice(index, 1);
            	rect.w += 15;
            }
        }
        requestAnimationFrame(draw);

    }

    /*创建道具*/
    function createGift(obj) {
        let x = obj.x + obj.w / 2;
        let y = obj.y + obj.h / 2;
        gift.push({
            x: x,
            y: y,
            r: 10,
            color: obj.color,
            vy: 10
        })
    }



    document.onkeydown = function(e) {
        var code = e.keyCode;
        if (code == 37) {
            dir.left = true;
        }
        if (code == 39) {
            dir.right = true
        }
        if (code == 80) {
            draw();
        }
        /*
                if (code == 38) {
                    dir.top = true;

                }
                if (code == 40) {
                    dir.bottom = true;
                }*/
    }

    document.onkeyup = function(e) {
        var code = e.keyCode;
        if (code == 37) {
            dir.left = false;
        }
        if (code == 39) {

            dir.right = false
        }
        if (code == 38) {
            dir.top = false;
        }
        if (code == 40) {
            dir.bottom = false;
        }
    }

    requestAnimationFrame(lineMove);

    function lineMove() {
        if (dir.left) {
            rect.x -= 10;

        }
        if (dir.right) {
            rect.x += 10;
        }
        if (dir.top) {
            rect.y -= 10;
        }
        if (dir.bottom) {
            rect.y += 10;

        }
        if (rect.x < 0) {
            rect.x = 0;
        }
        if (rect.x > 500 - rect.w) {
            rect.x = 500 - rect.w;
        }
        requestAnimationFrame(lineMove);
    }


    function checkCollision(obj1, obj2) {
        let left1 = obj1.x - obj1.r,
            right1 = obj1.x + obj1.r,
            top1 = obj1.y - obj1.r,
            bottom1 = obj1.y + obj1.r
        let left2 = obj2.x,
            right2 = obj2.x + obj2.w,
            top2 = obj2.y,
            bottom2 = obj2.y + obj2.h

        if (right1 > left2 && left1 < right2 && bottom1 > top2 && top1 < bottom2) {
            return true;
        }
        return false;
    }


    function getRandom(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }

    function getColor() {
        return `rgb(${getRandom(0, 255)},${getRandom(0, 255)},${getRandom(0, 255)})`;
    }
    </script>
</body>

</html>